<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-flex-v1" id="gBody">>
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<graceHeader background="#ffffff">
				<view class="grace-header-body" style="padding:0 20rpx;">
					<graceNavBar :items="tabs" :animatie="true" lineHeight="70rpx" textAlign="left" :isCenter="false" activeDirection="left"
					 activeColor="#1E9FFF" activeLineHeight="4rpx" activeLineWidth="64rpx" activeFontSize="36rpx" :currentIndex="currentIndex"
					 @change="navChange"></graceNavBar>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex">
						<graceSearch background="#f8f8f8" :disabled="true" @tapme="tapme"></graceSearch>
					</view>
					<!-- 设置按钮 -->
					<view class="grace-header-icons grace-black6 fz18 pr" @tap="set">
						<text class="grace-icons icon-comments"></text>
						<text class="ksd-icon-dot iconfont icon-dot grace-red fz18"></text>
					</view>
				</view>
			</graceHeader>


			<view class="pr ftp20">
				<!--伴我-->
				<view class="grace-animate slideInRight mt5 boxshadow" v-show="currentIndex == 0">
					<view class="white-rgba account-part1">
						<view class="grace-nowrap pr">
							<image src="../../static/images/default.jpg" class="account-face grace-box-shadow"></image>
							<view class="account-part1-r">
								<view class="account-name">
									<text>学相伴</text>
									<text class="iconfont pl3 pr tp3 fwn icon-vip fz24 grace-yellow"></text>
									<text class="iconfont icon-svip pr tp3 pl3 fwn fz24 grace-red"></text>
								</view>
								<view class="account-level fz12">
									<text>等级：Lv6</text>
									<text class="pl5">性别：男</text>
								</view>
								<view class="account-level fz12">
									<text class="fz12">你已经加入了：<text class="fw fz14 pr2">1258 </text>天</text>
								</view>
							</view>
						</view>
						<view class="account-tags grace-wrap pr ">
							<view class="pr ftp3">
								<text class="grace-text-small grace-black fz12 fw">#{{famousmsg}}#</text>
							</view>
							<view class="ksd-sign-box"><text class="iconfont icon-qiandao pr2 pr tp1"></text>签到</view>
						</view>
					</view>
					<view class="defaulbgf mt5 fd10 overflow hide">
						<text class="fl fw grace-red fz12"><text class="iconfont icon-xitongxiaoxi pr4"></text>距离你生日还有：120天</text>
						<text class="fr fz12 grace-black6">点击查看福利<text class="pl4 iconfont icon-right"></text></text>
					</view>

					<!--学习课程-->
					<view class="ksd-relation-zuji grace-white fm10">
						<view class="grace-title mt20">
							<text class="grace-title-text grace-black fz16">学习课程</text>
							<text class="grace-black6 fz12" @tap="canBatch"><text class="iconfont icon-Dotsellipsismenu"></text></text>
						</view>
						<view class="grace-margin-top">
							<swiper class="swiper" style="height:300rpx;"  :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item>
									<!--学习课程-->
									<view class="grace-img-card  grace-animate slideInLeft">
										<view class="grace-img-card-item fl" @click="godetail(index)" v-for="(news, index) in newlist" :key="index">
											<view class="grace-img-card-img">
												<image :src="'https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/' + (news%4 + 1) + '.png'" class="grace-img-card-img"></image>
												<view class="count">
													<text>
														<text class="iconfont icon-play-square  fz14 pr3 pr tp1"></text>
														43.7万
													</text>
													<text>
														<text class="iconfont icon-liulan fz16 pr3 pr tp1"></text>
														6056
													</text>
												</view>
											</view>
											<text class="title fz12">美国新冠疫苗已经开打！街访纽约路人会打吗？</text>
										</view>
									</view>
								</swiper-item>
								<swiper-item>
									<!--学习课程-->
									<view class="grace-img-card  grace-animate slideInLeft">
										<view class="grace-img-card-item fl" @click="godetail(index)" v-for="(news, index) in newlist" :key="index">
											<view class="grace-img-card-img">
												<image :src="'https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/' + (news%4 + 1) + '.png'" class="grace-img-card-img"></image>
												<view class="count">
													<text>
														<text class="iconfont icon-play-square  fz14 pr3 pr tp1"></text>
														43.7万
													</text>
													<text>
														<text class="iconfont icon-liulan fz16 pr3 pr tp1"></text>
														6056
													</text>
												</view>
											</view>
											<text class="title fz12">美国新冠疫苗已经开打！街访纽约路人会打吗？</text>
										</view>
									</view>
								</swiper-item>
								<swiper-item>
									<!--学习课程-->
									<view class="grace-img-card  grace-animate slideInLeft">
										<view class="grace-img-card-item fl" @click="godetail(index)" v-for="(news, index) in newlist" :key="index">
											<view class="grace-img-card-img">
												<image :src="'https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/' + (news%4 + 1) + '.png'" class="grace-img-card-img"></image>
												<view class="count">
													<text>
														<text class="iconfont icon-play-square  fz14 pr3 pr tp1"></text>
														43.7万
													</text>
													<text>
														<text class="iconfont icon-liulan fz16 pr3 pr tp1"></text>
														6056
													</text>
												</view>
											</view>
											<text class="title fz12">美国新冠疫苗已经开打！街访纽约路人会打吗？</text>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>

					<!--相关足迹-->
					<view class="ksd-relation-zuji fm10">
						<view class="grace-title mt20">
							<text class="grace-title-text grace-black fz16">足迹</text>
							<text class="grace-black6 fz12" @tap="canBatch"><text class="iconfont icon-web-icon- pr2 pr tp2"></text>{{batch ? '取消操作' : '批量操作'}}</text>
						</view>
						<view class="grace-margin-top">
							<graceCheckList :isBorder="false" :lists="demoData" @change="change" :batch="batch" v-if="demoData.length > 0"
							 :height="mainHeight">
								<!-- 底部操作按钮插槽 -->
								<view class="grace-nowrap grace-flex-end">
									<text class="remove grace-blue grace-icons icon-remove" @tap="removeDatas">删除</text>
								</view>
							</graceCheckList>
						</view>
					</view>
					
					<graceEmptyNew>
						<view slot="img" class="empty-view">
							<!-- 请根据您的项目要求制作并更换为空图片 -->
							<image class="empty-img" style="width: 240rpx;" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
						</view>
						<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到任何数据</text>
					</graceEmptyNew>
				</view>

				<!--日历-->
				<view class="grace-animate slideInLeft fm10" v-show="currentIndex == 1">
					<scroll-view class="grace-scroll-x" :scroll-left="scrollLeft" scroll-x="true" :scroll-into-view="'scrollItem'+zcurrentIndex">
						<view class="grace-scroll-items" v-for="(item, index) in dateList" :key="index" :class="[zcurrentIndex == index ? 'grace-scroll-day-active' : '']"
						 @tap="changeDay(index)" :id="'scrollItem'+index">
							<view class="grace-scroll-items-date" :class="[zcurrentIndex == index ? 'grace-scroll-day-active' : '']">{{item.day}}</view>
							<view class="grace-scroll-items-week" :class="[zcurrentIndex == index ? 'grace-scroll-day-active' : '']">{{item.week}}</view>
						</view>
					</scroll-view>
					<view class="grace-list">
						<view style="padding:20rpx;text-align: center;background:#ddd;" class="fw fz14">{{dateList[zcurrentIndex].fullday}}{{datestr}}</view>
						<view class="grace-list-items" v-for="(item, index) in 10" :key="index">
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title">
									<text class="grace-list-title-text">07:00 - 18:00</text>
								</view>
								<view class="grace-list-body-desc">某科急诊<text class="price">￥25</text></view>
							</view>
							<view class="button">预约</view>
						</view>
					</view>
					
					<graceEmptyNew>
						<view slot="img" class="empty-view">
							<!-- 请根据您的项目要求制作并更换为空图片 -->
							<image class="empty-img" style="width: 240rpx;" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
						</view>
						<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到任何数据</text>
					</graceEmptyNew>
					
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
	
	var graceDate = require("../../graceUI/jsTools/date.js");
	var graceJS = require('@/Grace.JS/grace.js');
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceCheckList from "../../graceUI/components/graceCheckList.vue";
	import graceNavBar from '../../graceUI/components/graceNavBar.vue';
	import GetLunarDay from '../../common/ksd-date.js'
	import graceEmptyNew from "../../graceUI/components/graceEmptyNew.vue";
	
	
	// 起始日期, 格式 2019-08-01
	// 例如今天
	var startDay = getNowFormatDate();
	// 区间天数
	var timeRegion = 365;
	// 获取当天时间
	function getNowFormatDate() {
		var date = new Date();
		var seperator1 = "-";
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		if (month >= 1 && month <= 9) {
			month = "0" + month;
		}
		if (strDate >= 0 && strDate <= 9) {
			strDate = "0" + strDate;
		}
		var currentdate = year + seperator1 + month + seperator1 + strDate;
		return currentdate;
	}

	// 区间天数转换为一个数组
	var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	var dateList = [];
	var todayTimer = graceDate.dateTimeToTimeStamp(startDay + ' 01:01:00');
	for (let i = -100; i < timeRegion; i++) {
		var timeStamp = todayTimer + (i * 3600 * 24);
		var obj = {};
		obj.day = graceDate.formatDateTime(timeStamp, 'str').substring(5, 10);
		var date = new Date();
		date.setTime(timeStamp * 1000);
		obj.week = weekday[date.getDay()];
		obj.fullday = graceDate.formatDateTime(timeStamp, 'str').substring(0, 10);
		obj.fullday2 = graceDate.formatDateTime(timeStamp, 'str').substring(0, 10).replace(/-/ig,"/");
		dateList.push(obj);
	}

	export default {
		data() {
			return {
				currentIndex: 0,
				tabs: ['伴我', '日历'],
				dateList: dateList,
				zcurrentIndex:100,
				scrollLeft:8200,

				newlist: [1, 2],
				datestr: "",

				mainHeight: 0,
				demoData: [{
						img: 'http://img3.imgtn.bdimg.com/it/u=1368451564,780267377&fm=11&gp=0.jpg',
						title: "出塞",
						desc: "秦时明月汉时关，万里长征人未还。",
						checked: false
					},
					{
						img: 'http://img3.imgtn.bdimg.com/it/u=2617388528,3756397415&fm=26&gp=0.jpg',
						title: "春晓",
						desc: "春眠不觉晓，处处闻啼鸟。",
						checked: false
					},
					{
						img: 'http://img1.imgtn.bdimg.com/it/u=1917833987,977801846&fm=26&gp=0.jpg',
						title: "寻隐者不遇",
						desc: "松下问童子，言师采药去",
						checked: false
					}
				],
				sedIndexs: [],
				batch: false,

				background: ['red', 'greeen', 'blue'],
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				famousmsg: "永远相信美好的事情即将发生",
				famous: ["但行好事，莫问前程",
					"去更远的地方，见更亮的光",
					"永远相信美好的事情即将发生",
					"生活原本沉闷，但跑起来就有风",
					"我们的征途是星辰大海",
					"保持热爱、奔赴山海",
					"须知少年凌云志，曾许人间第一流",
					"唯有热爱，能抵岁月漫长",
					"生活明朗，万物可爱，人间值得，未来可期",
					"即使再小的帆也能远航"
				]
			}
		},
		onReady: function() {
			uni.createSelectorQuery().select('#gBody').fields({
				size: true
			}, (res) => {
				// 138 = 演示标题高 + 25rpx 的marginTop
				this.mainHeight = res.height - uni.upx2px(840);
			}).exec();
		},

		onShow() {
			this.loadfanmouse();
			this.loadDate(new Date());
		},

		onPullDownRefresh() {
			this.loadfanmouse();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			loadDate(date) {
				var yy = date.getFullYear();
				var mm = date.getMonth() + 1;
				var dd = date.getDate();
				if (yy < 100) yy = "19" + yy;
				this.datestr = GetLunarDay(yy, mm, dd);
			},

			loadfanmouse() {
				var text = this.famous[Math.floor(Math.random() * this.famous.length)];
				this.famousmsg = text;
			},
			
			changeDay: function(index) {
				var selectedDay = this.dateList[index];
				this.loadDate(new Date(selectedDay.fullday2));
				this.zcurrentIndex = index;
				this.scrollLeft = this.zcurrentIndex * 82; 
			},
			
			navChange: function(e) {
				this.currentIndex = e;
			},
			tapme: function() {
				uni.navigateTo({
					url: '../search/search'
				});
			},
			set: function() {
				uni.navigateTo({
					url: '../msg/msg',
				});
			},
			canBatch: function() {
				this.batch = !this.batch;
			},
			change: function(e) {
				this.sedIndexs = e;
			},
			removeDatas: function() {
				if (this.sedIndexs.length < 1) {
					uni.showToast({
						title: "请选择数据",
						icon: 'none'
					});
					return;
				}
				//重新建立一个数组
				var newArr = [];
				this.demoData.forEach((item, index) => {
					if (graceJS.arrayIndexOf(this.sedIndexs, index) == -1) {
						console.log(index);
						newArr.push(item);
					}
				});
				this.demoData = newArr;
				this.batch = false;
			}
		},
		components: {
			gracePage,
			graceCheckList,
			graceEmptyNew
			
		}
	}
</script>
<style>
	
	
	page {
		background-color: #F8F8F8;
	}
	
	.gui-search {
		width: 280rpx !important;
	}

	.grace-scroll-x {
		border-bottom: 1px solid #F1F1F1;
		background-color: #F5F6F8;
	}

	.grace-scroll-items {
		width: 150rpx;
		margin: 0;
		padding: 12rpx 0;
		display: inline-flex;
		flex-direction: column;
		 white-space: nowrap; 
	}

	.grace-scroll-items-date {
		font-size: 28rpx;
		width: 100%;
		line-height: 50rpx;
		text-align: center;
	}

	.grace-scroll-items-week {
		font-size: 22rpx;
		width: 100%;
		line-height: 36rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.grace-scroll-day-active {
		background: #3688FF;
		color: #FFFFFF;
	}

	.grace-list-items {
		position: relative;
	}

	.price {
		color: #FF9B00;
		margin: 0 10rpx;
	}

	.button {
		position: absolute;
		z-index: 1;
		right: 8px;
		bottom: 15px;
		background: #3688FF;
		color: #FFFFFF;
		width: 100rpx;
		height: 50rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	/* 请根据项目来规划自己的图片大小，请对图片进行等比缩放 */
	.grace-news-img {
		width: 220rpx;
		height: 150rpx;
	}

	.big-img {
		width: 700rpx;
		height: 388rpx;
		overflow: hidden;
		margin: 15rpx 0;
	}

	.big-image {
		width: 700rpx;
		height: 388rpx;
		border-radius: 6rpx;
	}

	.grace-news-imgs-img {
		width: 225rpx;
	}

	.grace-img-card-title {
		background: #f8f8f8;
		padding: 5px 10px;
	}

	.title-article .title-msg {
		margin-bottom: 10px;
		font-size: 12px;
	}

	.ksd-avatar {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		vertical-align: initial;
		top: 2px;
		position: relative;
	}

	.tag {
		height: 25px;
		margin: 1px 1px 1px 0;
		padding: 4px 10px;
		font-size: 12px;
		color: #fff;
		border-radius: 12px;
		line-height: 26px;
		background: var(--main-bg-color);
	}

	.grace-img-card-item .title {
		font-size: 24rpx;
		color: #212121;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.count {
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100% - 16px);
		font-size: 12px;
		padding: 6px 8px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		color: #fff;
		background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.85)), to(transparent));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
	}

	.account-part1 {
		padding: 40rpx 30rpx 30rpx;
	}

	.account-part2 {
		border-radius: 16rpx;
		padding: 8px 36rpx;
	}

	.account-part3 {
		border-radius: 16rpx;
		padding: 4rpx 0;
	}

	.account-face {
		width: 150rpx;
		height: 150rpx;
		border-radius: 120rpx;
		background-color: #FFFFFF;
		flex-shrink: 0;
	}

	.account-part1-r {
		width: 700rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.account-name {
		font-size: 32rpx;
		line-height: 40rpx;
		font-weight: 600;
		display: block;
	}

	.account-level {
		font-size: 32rpx;
		line-height: 40rpx;
		font-weight: 400;
		display: block;
	}

	.account-tags {
		margin-top: 35rpx;
	}

	.account-tag {
		display: inline-flexbox;
		background-color: #eee;
		border-radius: 10rpx;
		margin-right: 12rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		padding: 16rpx;
		color: #333;
	}

	.grace-grids-items {
		width: 25%;
	}

	.ksd-sign-box {
		font-size: 12px;
		color: #FFFFFF;
		position: absolute;
		background: #03A9F4;
		border-radius: 30rpx;
		padding: 6rpx 28rpx;
		bottom: 8rpx;
		right: -12rpx;
	}
	
	.uni-scroll-view {
	    width: 100%!important;
	}
	
	.uni-scroll-view  .grace-scroll-items {
		display: inline-block!important;
	}
</style>
